<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Title</title>
</head>
<body>
<nav class="navbar navbar-default" th:fragment="headerBar">
    <div class="container container-fluid">
        <li class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li>
                    <a th:href="@{/index.html}">主页</a>
                </li>
                <li>
                    <a th:href="@{/petArticle/list}">宠物知识</a>
                </li>
                <li>
                    <!--<a th:href="@{/petAdopt.html}">领养中心</a>-->
                    <a th:href="@{/pet/list}">领养中心</a>
                </li>
                <li>
                    <a th:href="@{/activity/list}">团队活动</a>
                </li>
                <li>
                    <a th:href="@{/team/teamList}">团队展示</a>
                </li>
<!--                <li>-->
<!--                    <a th:href="@{/comment/listPet}">评论专区</a>-->
<!--                </li>-->

                <li th:if="${!#strings.isEmpty(session.loginUser)}">
                    <div class="login">
                        <input type="text" id="userId" th:value="${session.loginUser.id}" hidden>
                        <a th:href="@{/personal.html}" data-toggle="popover" data-placement="bottom" data-trigger="hover"><span th:text="${session.loginUser.username}"></span></a>
                        <a>|</a>
                        <a th:href="@{/user/logOut}">注销</a>
                    </div>
                </li>

                <li th:if="${#strings.isEmpty(session.loginUser)}">
                    <div class="login">
                        <a th:href="@{/login.html?1}">登录</a>
                        <a>|</a>
                        <a th:href="@{/login.html?2}">注册</a>
                    </div>
                </li>
                <li th:if="${!#strings.isEmpty(session.loginUser)}">
                    <div style="width: 50px;height: 50px;">
                        <img th:src="${session.loginUser.pic}" alt="我的头像" style="width: 50px;  border-radius: 25px;"  >
                    </div>
                </li>
                <li th:if="${session.msgNum!=0 and !#strings.isEmpty(session.msgNum)}">
                    <a th:href="@{/user/myMessage}" style="color: red" th:text="${session.msgNum}+'新消息'"></a>
                </li>
            </ul>

    </div>
</nav>
<footer th:fragment="footBar">
    <div class="container-fluid" id="footer" style="margin-top: 30px">
        <div class="container">
            <div class="col-lg-4 col-md-4 col-sm-4">
                <h3>网站简介</h3>
                <p>
                    该网站是用于想领养宠物和想成为我们其中一员，那么你将再这里实现你的想法。
                    如果你是领养者，请认真选取想要领养的宠物领养后，请认真负责对待可爱的猫狗！
                    如果你是想成为志愿者，请联系我们，我们欢迎任何爱心认识，加入我们！
                </p>
            </div>
            <div class="col-lg-4 col-md-4 col-sm-4 footer-mid">
                <h3>宠物展示</h3>
                <div class="img-box">
                    <ul>
                        <li>
                            <img th:src="@{/asserts/images/f1.jpg}" src="asserts/images/f1.jpg" alt="f1.jpg"/>
                        </li>
                        <li>
                            <img th:src="@{/asserts/images/f2.jpg}" src="asserts/images/f2.jpg" alt="f2.jpg"/>
                        </li>
                        <li>
                            <img th:src="@{/asserts/images/f3.jpg}" src="asserts/images/f3.jpg" alt="f3.jpg"/>
                        </li>
                        <li>
                            <img th:src="@{/asserts/images/f4.jpg}" src="asserts/images/f3.jpg" alt="f4.jpg"/>
                        </li>
                        <li>
                            <img th:src="@{/asserts/images/f5.jpg}" src="asserts/images/f3.jpg" alt="f5.jpg"/>
                        </li>
                        <li>
                            <img th:src="@{/asserts/images/f6.jpg}" src="asserts/images/f3.jpg" alt="f6.jpg"/>
                        </li>
                    </ul>
                </div>
            </div>
            <!--联系方式-->
            <div class="col-lg-4 col-md-4 col-sm-4">
                <h3>联系方式</h3>
                <p>电话&nbsp;&nbsp;<span style="font-size: 22px;color: red">14390872021</span></p>
                <br>
                <p>邮件&nbsp;&nbsp;<span style="font-size: 22px;color: red">Pet@woniu.com</span></p>
                <br>
                <p>官网&nbsp;&nbsp;<span style="font-size: 22px;color: red">www.woniupet.com</span></p>
                <br>
            </div>
        </div>
    </div>
</footer>

</body>
</html>